 <template>
  <div>Mixin</div>
</template>
 
 <script>
import common, {mixin2} from "./mixin";
export default {
  //组件中引入多个 mixin，并且不同mixin里的同名方法，按照引进的顺序，最后的覆盖前面的同名方法。
  //生命周期是按照 mixin 被引入的顺序执行的
  mixins: [common,mixin2],  
  data: function () {
    return {
      message: "组件的相同数据",
      self: "self组件自己的数据",
    };
  },
  methods: {
    // foo mixin中的这个方法也存在于这个组件了
    bar: function () {
      console.log("bar");
    },
    conflicting: function () {
      console.log("from self");
    },
  },
  created: function () {
    // 组件和mixin的数据相同会被合并，并且以组件的为主
    console.log(this.$data); // => { message: "组件的相同数据", foo: "abc", bar: "def" }

    // 如果组件和mixin中的 computed metheds filter directives 等对象选项的键名相同会被合并，以组件的为主
    this.conflicting()
    this.foo()//组件中引入多个 mixin，并且不同mixin里的同名方法，按照引进的顺序，最后的覆盖前面的同名方法。

    // 如果组件和mixin的钩子函数相同，两者的都会执行，并且mixin的钩子函数会在组件的之前被执行
    console.log("组件钩子被调用"); //混入对象的钩子被调用，组件钩子被调用
  },
};
</script>
 
 <style>
</style>